/**
 * Created with hong.rong
 * Description:*
 * Date:2020/06/24
 */

import React, { useState } from 'react'
import { Table, Button } from 'antd'
import Carousel, { Modal, ModalGateway } from 'react-images'
import useBanner from './useBanner'
import Modify from './components/Modify'

export default function Index() {
  const {
    loading,
    pagination,
    total,
    dataSource,
    handleFetchList,
  } = useBanner()

  const [visible, setVisible] = useState(false)
  const [imgUrl, setImgUrl] = useState([])

  const renderColumn = () => {
    return [
      {
        title: '序列',
        dataIndex: 'bannerId',
        ellipsis: true,
      },
      {
        title: '缩略图',
        dataIndex: 'img',
        width: 80,
        render: v => {
          if (v) {
            return (
              <img
                style={{
                  display: 'block',
                  width: 60,
                  height: 'auto',
                  cursor: 'pointer',
                }}
                src={v}
                alt=""
                onClick={() => {
                  setImgUrl([v])
                  setVisible(true)
                }}
              />
            )
          }
        },
      },
      {
        title: '名称',
        dataIndex: 'title',
        ellipsis: true,
      },
      {
        title: '配置',
        dataIndex: 'address',
        ellipsis: true,
      },
      {
        title: '操作',
        dataIndex: 'action',
        width: 100,
        render: (_, r) => (
          <div className="ub ub-row ub-ac">
            <Modify>
              {show => (
                <div
                  className="link-button mr-10"
                  onClick={() =>
                    show(Modify.TYPE.VIEW.VALUE, {
                      bannerId: r.bannerId,
                      title: r.title,
                      img: [
                        {
                          uid: `rc-upload-${Date.now()}`,
                          name: r.title,
                          url: r.img,
                          status: 'done',
                        },
                      ],
                      address: r.address,
                    })
                  }
                >
                  详情
                </div>
              )}
            </Modify>
            <Modify
              refreshList={() =>
                handleFetchList({
                  page: pagination.current,
                  pageSize: pagination.pageSize,
                })
              }
            >
              {show => (
                <div
                  className="link-button"
                  onClick={() =>
                    show(Modify.TYPE.EDIT.VALUE, {
                      bannerId: r.bannerId,
                      title: r.title,
                      img: [
                        {
                          uid: `rc-upload-${Date.now()}`,
                          name: r.title,
                          url: r.img,
                          status: 'done',
                        },
                      ],
                      address: r.address,
                    })
                  }
                >
                  编辑
                </div>
              )}
            </Modify>
          </div>
        ),
      },
    ]
  }
  /**
   * 翻页
   * @param pagination
   * @returns {Promise<void>}
   */
  const handlePageChange = async pagination => {
    await handleFetchList({
      page: pagination.current,
      pageSize: pagination.pageSize,
    })
  }

  return (
    <div>
      <div style={{ textAlign: 'right', marginBottom: 20 }}>
        <Modify
          refreshList={() =>
            handleFetchList({
              page: pagination.current,
              pageSize: pagination.pageSize,
            })
          }
        >
          {show => (
            <Button
              type="primary"
              onClick={() => show(Modify.TYPE.CREATE.VALUE, {})}
            >
              新增配置
            </Button>
          )}
        </Modify>
      </div>
      <Table
        loading={loading}
        pagination={{
          current: pagination.page,
          pageSize: pagination.pageSize,
          total: total,
        }}
        dataSource={dataSource}
        columns={renderColumn()}
        rowKey={(v, i) => i}
        onChange={handlePageChange}
      />
      <ModalGateway>
        {visible ? (
          <Modal onClose={() => setVisible(false)}>
            <Carousel
              views={imgUrl.map(v => ({
                src: v,
              }))}
            />
          </Modal>
        ) : null}
      </ModalGateway>
    </div>
  )
}
